<template>
	<view class="layout">
		<common-title></common-title>
	</view>
	<view class="notice">
		<view class="left">
			<uni-icons type="sound-filled" size="20"></uni-icons>
			<text class="text">公告</text>
		</view>
		<view class="center">
			<text class="tip">仅用于展示基础算法能力</text>
		</view>
	</view>	
	<view class="banner">
		<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay class="b-swiper">
			<swiper-item class="item">
				<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/show1.png" mode="widthFix"></image>
			</swiper-item>
			<swiper-item class="item">
				<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/show2.png" mode="widthFix"></image>
			</swiper-item>	
			<swiper-item class="item">
				<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/show3.png" mode="widthFix"></image>
			</swiper-item>	
			<swiper-item class="item">
				<image src="https://aitestgo-bj.oss-cn-beijing.aliyuncs.com/docker/alg/uniapp/ui/show4.png" mode="widthFix"></image>
			</swiper-item>	
		</swiper>
	</view>
			
	
	<view class="content">	
<!-- 		<view class="icon"  v-for="item in 18">
			<image src="../../static/facce.png" mode="widthFix"></image>
			<text>人体姿态</text>
		</view> -->
		<view class="icon" @click="OnBodyPose">
			<image src="../../static/pose.png" mode="widthFix"></image>
			<text>人体姿态</text>
		</view>
		<view class="icon" @click="OnHandPose">
			<image src="../../static/hand.png" mode="widthFix"></image>
			<text>手部姿态</text>
		</view>
		<view class="icon" @click="OnFacePose">
			<image src="../../static/facce.png" mode="widthFix"></image>
			<text>脸部姿态</text>
		</view>
		<view class="icon" @click="OnObjDet">
			<image src="../../static/objdet.png" mode="widthFix"></image>
			<text>物体检测</text>
		</view>
		<view class="icon" @click="OnLandMark">
			<image src="../../static/dibiao.png" mode="widthFix"></image>
			<text>驴友地标</text>
		</view>
		<view class="icon" @click="OnAnimalClassify">
			<image src="../../static/dongwu.png" mode="widthFix"></image>
			<text>动物百科</text>
		</view>
		<view class="icon" @click="OnUnmannedplane">
			<image src="../../static/无人机.png" mode="widthFix"></image>
			<text>无人机</text>
		</view>
		<view class="icon" @click="OnPlantClassify">
			<image src="../../static/zhiwu.png" mode="widthFix"></image>
			<text>植物专家</text>
		</view>
		<view class="icon" @click="OnGuoShuClassify">
			<image src="../../static/guoshu.png" mode="widthFix"></image>
			<text>果蔬大王</text>
		</view>
		<view class="icon" @click="OnCaiPinClassify" v-if=False>
			<image src="../../static/caipin.png" mode="widthFix"></image>
			<text>吃货品菜</text>
		</view>
		<view class="icon" @click="OnScratchPaint" v-if=False>
			<image src="../../static/huihua.png" mode="widthFix"></image>
			<text>我是画家</text>
		</view>
		<view class="icon" @click="OnPerson2Ani" v-if=False>
			<image src="../../static/dongman.png" mode="widthFix"></image>
			<text>人物动漫</text>
		</view>
		<view class="icon" @click="OnCarClassify">
			<image src="../../static/car.png" mode="widthFix"></image>
			<text>懂车之帝</text>
		</view>
		<view class="icon" @click="OnSpeechAsr">
			<image src="../../static/语音.png" mode="widthFix"></image>
			<text>字正腔圆</text>
		</view>
	</view>	
	<view class="aigctitle" v-if=False>AIGC</view>
	<view class="aigccontent" v-if=False>
		<view class="box" @click="OnChatLLM">
			<image src="../../static/chat.png" mode="widthFix"></image>
			<text>聊天解闷</text>
		</view>
		<view class="box">
			<image src="../../static/doctor.png" mode="widthFix"></image>
			<text>寻医问诊</text>
		</view>
	</view>
</template>

<script setup>
function OnBodyPose(){
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=人体姿态"
	})
}

const OnHandPose=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=手部姿态"
	})
}
const OnObjDet=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=物体检测"
	})
}
const OnFacePose=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=脸部姿态"
	})
}
const OnLandMark=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=地标识别"
	})
}
const OnAnimalClassify=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=动物识别"
	})	
}

const OnUnmannedplane=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=无人机检测"
	})	
}
const OnPlantClassify=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=植物识别"
	})	
}
const OnGuoShuClassify=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=果蔬识别"
	})	
}
const OnCaiPinClassify=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=菜品识别"
	})	
}
const OnScratchPaint=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=线稿出图"
	})	
}
const OnPerson2Ani=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=人物动漫"
	})	
}
const OnCarClassify=()=>{
	uni.navigateTo({
		url:"/pages/img2img/img2img?type=车辆识别"
	})	
}
const OnChatLLM=()=>{
	uni.navigateTo({
		url:"/pages/chat/chat"
	})	
}
const OnSpeechAsr=()=>{
	uni.navigateTo({
		url:"/pages/speechasr/speechasr"
	})		
}
</script>

<style lang="scss" scoped>	
.notice{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background: #f9e6f2;
	margin: 0 auto;
	border-radius: 10rpx;
	display: flex;
	border-radius: 10rpx;
	.left{
		width: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		:deep(){
			.uni-icons{
				color:f2fff8 !important;
			}
		}			
		.text{
			color:#555;
			font-weight: 600;
			font-size: 28rpx;
		}
	}
	.center{
		flex:1;
		.tip{
			height: 100%;
			height: 100%;
			font-size: 28rpx;
			color:#666;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.right{
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.banner{
	background-color: #f2fff8;
	border-radius: 10rpx;
	.b-swiper{		
		.item{
			image{
				border-radius: 10rpx;
				width:750rpx;
			}
		}
	}
}
.content{
	background-color: #f2fff8;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap:15rpx;
	padding:15rpx;
	.icon{
	  justify-content: center; /* 沿主轴居中对齐 */
	  align-items: center; /* 沿交叉轴居中对齐 */
	image{
		width:100%;
	}
	text{
		white-space: nowrap;
		font-size:12px;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #555;
		font-weight:bold;
	}	
	}
}
.aigctitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20rpx 40rpx;
    font-size: 18px;
	font-weight: bold;
	background-color: #defffe;
	//border-radius: 12px;
}
.aigccontent{
	background-color: #defffe;
	display: grid;
	grid-template-columns: repeat(2, 1fr);	
	.box{
		justify-content: center; /* 沿主轴居中对齐 */
		align-items: center; /* 沿交叉轴居中对齐 */
		image{
			width:100%;
		}
	text{
		padding-bottom: 10px;
		white-space: nowrap;
		font-size:20px;
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: rgb(18, 150, 219);
		font-weight:bold;
		
	}
	}
}
</style>
